<template>
	<main-content>
		<z-paging ref="paging" v-model="listData" @query="getList" @loadingStatusChange='nextPage'>
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<template #top>
				<view class="p-16">
					<!-- <view class="m-b-8">
						<u-tabs :list="TRADE_STATUS_A" inactive-color='rgba(153, 153, 153, 1)' :active-color='maiColor'
							:is-scroll="true" v-model="tabVal" @change="changeTab"></u-tabs>
					</view> -->
					<view class="flex flex-row justify-between items-center">
						<view class="grow">
							<u-search placeholder="请输入交易订单号" :clearabled='true' v-model="queryForm.id"
								:show-action="false" shape='square' @input="onSearch"></u-search>
						</view>
						<view class="m-l-8 query-btn">
							<u-button size="mini" class="" hover-class='none' @click="showQueryFormFu">
								<u-icon name="grid" :color="maiColor" class="p-r-2" />
								筛选
							</u-button>
						</view>
					</view>
				</view>
			</template>
			<view class="flex flex-col"> <!-- style="height: 100vh;" -->
				<view class="content-color grow p-y-16" v-if="total > 0">
					<view class="my-card-border" v-for="(item,index) in listData" :item='item.id'>
						<u-card :foot-border-top='false' :head-border-bottom='false' :show-foot='false'
							margin='0rpx 30rpx 16rpx' @click='showView(item)'>
							<template #head>
								<view class="flex flex-row justify-between">
									<group-title>
										<template #icon>
											<view class="main-color">
												<u-icon name="title-icon" custom-prefix="custom-icon" />
											</view>
										</template>
										{{item.merchantName}}</group-title>
									<view class="">

									</view>
								</view>
							</template>
							<template #body>
								<view class="flex flex-row justify-between items-center m-b-8">
									<view class="list-title main-color" style="font-size: 1.3rem;">
										+{{formatToMoney(item.tradeAmt/100)}}元
									</view>
									<view class="list-value">
										{{selectDictLabel(TRADE_STATUS,item.status)}}
									</view>
								</view>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										订单编号
									</view>
									<view class="list-value">
										{{item.id}}
										<u-icon name="copy-fill" custom-prefix="custom-icon" :color="maiColor"
											class="p-l-2" @tap.stop="copy(item.id)" />
									</view>
								</view>
								<view class="flex flex-row justify-between">
									<view class="list-title">
										订单时间
									</view>
									<view class="list-value">
										{{parseTime(item.cTime)}}
									</view>
								</view>
							</template>
						</u-card>
					</view>
				</view>
			</view>
		</z-paging>

		<u-popup v-model="showQueryForm" mode="center" width="90%" border-radius="14" :closeable='true'>
			<view>
				<view class="p-14">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						流水筛选</group-title>
				</view>
				<view class="p-x-16">
					<u-form class="query-form-box" :model="queryForm" ref="formDataRef" label-width='auto'
						label-position='top' :label-style="{color: 'rgba(153, 153, 153, 1)' }">
						<u-form-item label="交易日期区间" prop="cTime">
							<view class="" @click="onPicker">
								<uni-datetime-picker disabled type="daterange" return-type='timestamp'
									v-model="queryForm.cTime" :clearIcon='false' />
							</view>
						</u-form-item>
						<u-form-item label="交易状态" prop="statusList">
							<u-input v-model="queryForm.statusLabel" placeholder="请选择退款状态" type="select" border disabled
								@click="onStatus()">
								<template #right-icon>
									<view class="right-icon-box">
										<u-icon name="close-circle-fill" style="color: #c0c4cc;"
											v-if="!$System.isEmpty(queryForm.statusLabel)" @tap.stop="onDelStatus()" />
										<u-icon name="danjiantou-right" custom-prefix="custom-icon"
											style="color: #c0c4cc;" />
									</view>
								</template>
							</u-input>
							<!-- <my-select clearable v-model="queryForm.statusList" :options="TRADE_STATUS" border
								multiple /> -->
						</u-form-item>
						<u-form-item label="商户名称" prop="merchantId" v-if="useUserStore().userType=='2'">
							<u-input v-model="queryForm.merchantName" placeholder="请选择商户名称" type="select" border
								disabled @click="onMerchantName()">
								<template #right-icon>
									<view class="right-icon-box">
										<u-icon name="close-circle-fill" style="color: #c0c4cc;"
											v-if="!$System.isEmpty(queryForm.merchantName)"
											@tap.stop="onDelMerchantName()" />
										<u-icon name="danjiantou-right" custom-prefix="custom-icon"
											style="color: #c0c4cc;" />
									</view>
								</template>
							</u-input>
							<!-- <select-mch v-model="queryForm.merchantId" placeholder="请选择商户名称" border :clearable='true'
								:queryParams="{showRoleFlag: false}" /> -->
						</u-form-item>
						<u-form-item label="门店名称" prop="idOrStatusName" v-if="useUserStore().userType=='4'">
							<u-input v-model="queryForm.statusName" placeholder="请选择门店名称" type="select" border disabled
								@click="onStatusName()">
								<template #right-icon>
									<view class="right-icon-box">
										<u-icon name="close-circle-fill" style="color: #c0c4cc;"
											v-if="!$System.isEmpty(queryForm.statusName)"
											@tap.stop="onDelStatusName()" />
										<u-icon name="danjiantou-right" custom-prefix="custom-icon"
											style="color: #c0c4cc;" />
									</view>
								</template>
							</u-input>
							<!-- <select-store v-model="queryForm.idOrStatusName" placeholder="请选择门店名称" border
								:clearable='true' :queryParams="{showRoleFlag: false}" /> -->
						</u-form-item>
						<u-form-item label="交易订单号" prop="id">
							<u-input v-model="queryForm.id" placeholder="请输入交易订单号" border clearable />
						</u-form-item>
						<u-form-item label="通道类型" prop="channelTypeList">
							<u-input v-model="queryForm.channelTypeLabel" placeholder="请选择通道类型" type="select" border
								disabled @click="onChannelType()">
								<template #right-icon>
									<view class="right-icon-box">
										<u-icon name="close-circle-fill" style="color: #c0c4cc;"
											v-if="!$System.isEmpty(queryForm.channelTypeLabel)"
											@tap.stop="onDelChannelType()" />
										<u-icon name="danjiantou-right" custom-prefix="custom-icon"
											style="color: #c0c4cc;" />
									</view>
								</template>
							</u-input>
							<!-- <my-select clearable v-model="queryForm.channelTypeList" :options="ZZB_CHANNEL_TYPE" border
								multiple /> -->
						</u-form-item>
					</u-form>
				</view>
				<view class="p-16 flex flex-row justify-between items-center">
					<view class="">
						<u-button @click="resetQuery">重置</u-button>
					</view>
					<view class="grow p-l-8">
						<u-button type="primary" @click="onSearch();showQueryForm=false">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<view style="position: absolute;top:-800vh;z-index: 99999;">
			<uni-datetime-picker ref="pickerRef" type="daterange" return-type='timestamp' v-model="queryForm.cTime"
				@change='onChange' :clearIcon='false' />
			<my-select ref='statusRef' clearable v-model="queryForm.statusList" :options="TRADE_STATUS" border multiple
				@change='statusChange' />
			<select-mch ref='merchantRef' v-model="queryForm.merchantId" placeholder="请选择商户名称" border :clearable='true'
				:queryParams="{showRoleFlag: false}" @change='merchantChange' />
			<select-store ref='storeRef' v-model="queryForm.idOrStatusName" placeholder="请选择门店名称" border
				:clearable='true' :queryParams="{showRoleFlag: false}" @change='storeChange' />
			<my-select ref='channelTypeRef' clearable v-model="queryForm.channelTypeList" :options="ZZB_CHANNEL_TYPE"
				border multiple @change='channelTypeChange' />
		</view>

	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		TRADE_STATUS,
		AUTH_BUSS_TYPE,
		ZZB_CHANNEL_TYPE
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel,
		formatToMoney,
		parseTime,
		copy
	} from '@/common/common.js'
	import {
		orderApi
	} from '@/pages-menus/common/api/order/index.js'
	import {
		TimeUtils
	} from '@/common/myDay.js'
	import selectStore from '@/components/select-store/index.vue'
	import selectMch from '@/pages-menus/components/select-mch/index.vue'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const TRADE_STATUS_A = [{
		name: '全部',
	}, ...TRADE_STATUS]

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})

	const initForm = {
		cTime: [TimeUtils.getDayStart().valueOf(), TimeUtils.getDayEnd()
			.valueOf()
		],
		cTimeBegin: TimeUtils.getDayStart().valueOf(),
		cTimeEnd: TimeUtils.getDayEnd().valueOf(),
		idOrStatusName: undefined,
		status: undefined,
		id: undefined,
		statusList: undefined,
		channelTypeList: undefined,
		merchantId: undefined,
		statusLabel: undefined,
		statusName: undefined,
		merchantName: undefined,
		channelTypeLabel: undefined,
		pageNo: 1,
		pageSize: 10,
	}
	const queryForm = ref({
		...initForm
	})
	const tabVal = ref(0)
	const changeTab = (val) => {
		// resetQuery()
		queryForm.value.status = TRADE_STATUS_A[val].value
		paging.value.reload()
	}
	const onSearch = (value) => {
		console.log('查询==》', queryForm.value);
		paging.value.reload()
	}

	const onChange = (val) => {
		queryForm.value.cTimeBegin = TimeUtils.getDayStart(val[0]).valueOf()
		queryForm.value.cTimeEnd = TimeUtils.getDayEnd(val[1]).valueOf()
	}

	const paging = ref(null)

	const total = ref(0)
	const listData = ref()
	// 获取数据列表
	const getList = async (pageNo, pageSize, ) => {
		// 统一显示加载框
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		queryForm.value.pageNo = pageNo ?? 1
		queryForm.value.pageSize = pageSize ?? 10
		let res = await orderApi.page(queryForm.value)
		// listData.value = res.data
		total.value = res.total
		paging.value.complete(res.data);
		// 隐藏加载框
		uni.hideLoading()
	}

	// 重置查询条件
	function resetQuery() {
		queryForm.value = {
			...initForm
		}
		paging.value.reload()
	}

	// 更多检索
	const showQueryForm = ref(false)
	const showQueryFormFu = () => {
		showQueryForm.value = true
	}

	// 下拉刷新被触发
	const onRefresh = () => {
		// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
		paging.value.complete();
	}

	// 底部状态
	const moreMap = ref()
	const moreStatus = ref('loading')
	// 下一页
	const nextPage = (val) => {
		console.log('val', val);
		moreStatus.value = val
	}

	const showView = (row) => {
		proxy.$System.goTo('/pages-menus/pages/order/form', {
			type: 'view',
			id: row.id
		})
	}
	/* 退款日期区间 */
	const pickerRef = ref(null)
	const onPicker = () => {
		pickerRef.value.show()
	}
	/* 退款日期区间 */
	/* 退款状态 */
	const statusRef = ref(null)

	function onStatus() {
		statusRef.value.xSelect.showPopup()
	}
	const onDelStatus = () => {
		// console.log('statusRef.value.xSelect==>', statusRef.value.xSelect);
		statusRef.value.xSelect.clearableFu()
	}
	const statusChange = (val) => {
		queryForm.value.statusLabel = proxy.$System.isEmpty(val) ? val : statusRef.value.xSelect.sLabel
	}
	/* 退款状态 */
	/* 通道类型 */
	const channelTypeRef = ref(null)

	function onChannelType() {
		channelTypeRef.value.xSelect.showPopup()
	}
	const onDelChannelType = () => {
		// console.log('statusRef.value.xSelect==>', statusRef.value.xSelect);
		channelTypeRef.value.xSelect.clearableFu()
	}
	const channelTypeChange = (val) => {
		queryForm.value.channelTypeLabel = proxy.$System.isEmpty(val) ? val : channelTypeRef.value.xSelect.sLabel
	}
	/* 通道类型 */
	/* 商户 */
	const merchantRef = ref(null)

	function onMerchantName() {
		merchantRef.value.onShowSelect()
	}
	const onDelMerchantName = () => {
		// console.log('statusRef.value.xSelect==>', statusRef.value.xSelect);
		merchantRef.value.clearableFu()
	}
	const merchantChange = (val) => {
		queryForm.value.merchantName = proxy.$System.isEmpty(val) ? val : merchantRef.value.sValue
	}
	/* 商户 */
	/* 门店 */
	const storeRef = ref(null)

	function onStatusName() {
		storeRef.value.onShowSelect()
	}
	const onDelStatusName = () => {
		// console.log('statusRef.value.xSelect==>', statusRef.value.xSelect);
		storeRef.value.clearableFu()
	}
	const storeChange = (val) => {
		queryForm.value.statusName = proxy.$System.isEmpty(val) ? val : storeRef.value.sValue
	}
	/* 门店 */
	onLoad(async (options) => {
		// 动态设置标题
		// uni.setNavigationBarTitle({
		// 	title: '标题'
		// })
	})
	onReady(() => {
		// paging.value.reload()
	})
</script>
<style lang='scss' scoped>
	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	:deep(.uni-date-editor--x__disabled) {
		opacity: 1;
	}

	:deep(.zp-paging-container) {
		background-color: #F6F7F9;
	}

	:deep(.u-card .u-card__head) {
		padding: 15px 15px 0 15px !important;
	}

	:deep(.u-card .u-card__foot) {
		padding: 0 15px 15px 15px !important;
	}

	.query-btn {
		:deep(.u-size-mini) {
			height: 64rpx;
			line-height: 64rpx;
			padding: 0 32rpx;
			font-size: 26rpx;
		}
	}

	.query-form-box {
		:deep(.u-form-item) {
			padding: 0;
		}
	}
</style>